<template>
 <button
  ref="_ref"
  class="lwq-button"
  :class="{
    [`lwq-button--${type}`]: type,
    [`lwq-button--${size}`]: size,
    'is-plain': plain,
    'is-round': round,
    'is-circle': circle,
    'is-disabled': disabled,
    'is-loading': loading
  }"
  :disabled="disabled || loading"
  :type="nativeType"
  :autofocus="autofocus"
 >
  <lwq-icon icon="spinner" spin v-if="loading" />
  <lwq-icon :icon="icon" v-if="icon"></lwq-icon>
  <span>
    <slot></slot>
  </span>
 </button>
</template>

<script setup lang="ts">
import { defineProps, ref } from 'vue';
import type { ButtonProps } from './types';
import LwqIcon from '../Icon/Icon.vue'
defineOptions({
  name: 'LWQButton'
})
withDefaults(defineProps<ButtonProps>(), {
  nativeType: 'button'
})

const _ref = ref<HTMLButtonElement>()

defineExpose({
  ref: _ref
})
</script>

<style scoped>
@import './style.css'
</style>
